<template>
	<view class="content">
		<!-- 使用 uni.createAnimation 创建动画 -->
		<view>
			<view class="demo-text" :animation="animationData">示例元素</view>
			<button size="mini" @click="animation1">自定义动画</button>
		</view>
		<view>-----------------------------------------------</view>
		<!-- 使用 uni-transition 创建动画 -->
		<!-- <view>
			<button type="primary" @click="open">fade</button>
			<uni-transition ref="ani" mode-class="slide-left" :show="show" @change="change">
				<view class="demo-text">示例元素2</view>
			</uni-transition>
		</view> -->
		<view>
			<button type="primary" @click="run">fade</button>
			<uni-transition ref="ani" :show="show" @change="change">
				<view class="demo-text">示例元素3</view>
			</uni-transition>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationData: {},
				show: true,
			}
		},
		onReady() {
			this.$refs.ani.init({
				duration: 1000,
				timingFunction: 'linear',
				transformOrigin: '50% 50%',
				delay: 500
			})
		},
		methods: {
			/** 使用 uni.createAnimation 创建动画 */
			animation1() {
				let animation = uni.createAnimation({
					transformOrigin: "50% 50%",
					duration: 1000,
					timingFunction: "ease",
					delay: 0
				});

				this.animationData = animation;
				// this.animationData.rotate(360).step(); //.step() 不能少
				this.animationData.scale(2).step();
				this.animationData.scale(1).step();
				// animation.rotate(360).scale(2).step();
				this.animationData = this.animationData.export(); // export() 也不能少
			},
			/** 使用 uni-transition 创建动画 */
			open(mode) {
				this.show = !this.show
			},
			change() {
				console.log('触发动画')
			},
			run() {
				// 同时右平移到 100px,旋转 360 读
				this.$refs.ani.step({
					translateX: '100px',
					rotate: '360'
				})
				// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
				this.$refs.ani.step({
					translateX: '0px',
					rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 200
				})
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				})
			},
		}
	}
</script>

<style>
	.demo-text {
		width: 200rpx;
		height: 100rpx;
		background-color: cadetblue;
	}
</style>
